<template>
  <div
    style="padding: 0 20px; margin-top: 0px"
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
  >
    <pannel-Title>
      <aps-form
        :config="apsForm.formConfig"
        :model="apsForm.formData"
        :formRef="apsForm.formRef"
        :labelWidth="apsForm.labelWidth"
        ref="form"
      ></aps-form>
    </pannel-Title>

    <div class="mt10">
      <el-row class="mb">
        <el-col :span="24">
          <pannel-Title>
            <Title :name="componentsName[0]" :line="false">
              <com-wt :data="stat"
            /></Title>
          </pannel-Title>
        </el-col>
      </el-row>
      <el-row class="mb" :gutter="10">
        <el-col :span="12">
          <pannel-Title>
            <Title :name="componentsName[1]" :line="false">
              <barChart
                v-show="blackHot.length > 0"
                :data="blackHot"
              ></barChart>
              <el-empty
                v-show="blackHot.length <= 0"
                style="width: 100%; height: 360px"
                description="暂无数据"
              ></el-empty>
            </Title>
          </pannel-Title>
        </el-col>
        <el-col :span="12">
          <pannel-Title>
            <Title :name="componentsName[2]" :line="false">
              <barChart
                v-show="readHot.length > 0"
                id="portrayalChartB"
                :data="readHot"
              ></barChart>
              <el-empty
                v-show="readHot.length <= 0"
                style="width: 100%; height: 400px"
                description="暂无数据"
              ></el-empty>
            </Title>
          </pannel-Title>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  malignantLoadStatistic,
  malignantLoadOverview,
} from "@/api/sub/portrayal";
import comWt from "@/views/configuration/arithmetic/portrayal/components/portrayalType.vue";
import BarChart from "@/views/configuration/arithmetic/portrayal/components/BarChart.vue";
export default {
  name: "portrayalTotal",
  components: {
    comWt,
    BarChart,
  },
  data() {
    return {
      stat: {},
      componentsName: [
        "识别负载概况",
        "黑榜---连续3月均有恶性负载单位排名",
        "红榜---连续3月没有恶性负载单位排名",
      ],
      blackHot: [], // 黑榜数据
      readHot: [], // 红榜数据
      // 查询表
      apsForm: {
        formRef: "form",
        labelWidth: "80px",
        formData: {},
        formConfig: {
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {
            date: {
              label: "日期:",
              typeName: "el-date-picker",
              type: "daterange",
              "start-placeholder": "开始日期",
              "end-placeholder": "结束日期",
              "value-format": "yyyy-MM-dd",
            },
          },
          formSoltButton: [
            {
              label: "搜索",
              type: "primary",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-search",
              click: this.handlerSearchDetail,
            },
            {
              label: "重置",
              type: "",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-refresh-left",
              click: this.handleReset,
            },
          ],
        },
      },
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    // 请求数据
    async initData() {
      let that = this;
      const [startTime, endTime] =
        this.$refs?.form?.getFieldsValue().date || [];
      const data = {
        endTime,
        startTime,
        month: 3,
        limit: 10,
      };
      this.$store.commit("app/updateApiCount", "add");
      await malignantLoadStatistic(data)
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          this.readHot = res.data.readHot;
          this.blackHot = res.data.blackHot;
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");

          // this.$message.error("系统错误,请联系管理员!301001");
        });
      await malignantLoadOverview(data)
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          this.stat = res.data;
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!301002");
        });
    },
    // 搜索
    handlerSearchDetail() {
      this.initData();
    },
    //重置
    handleReset() {
      this.$refs?.form?.resetFields();
      this.handlerSearchDetail();
    },
  },
};
</script>

<style scoped lang="scss">
.mb {
  margin-bottom: 10px;
}
::v-deep .el-card__body {
  padding-bottom: 0px;
}
</style>
